<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .box1,.box2,.box3{padding: 30px;border: solid 1px black;}
    </style>
	</head>
	<body>
    <div id="app">
       <h2>{{title}}</h2>
       <button type="button" v-on:click="title += 'world'">点击</button>
       <button type="button" v-on:click="fn(1)">点击</button>
       <button type="button" v-on:click="fun(2)">点击</button>
       <button type="button" v-on:click="func(3, $event)">点击</button>
       <button type="button" @click="fn">点击</button>
       <div class="box1" @click.once="fun1">
         <div class="box2" @click.self="fun2">
           <div class="box3" @click="fun3">
             <button @click="fun4">点击</button>
           </div>
         </div>
       </div>
       <input type="text" @keydown.a="down" />
       <br>
       <input type="text" v-model.lazy="title" />
       <br>
       <input type="number" v-model.number="num"/><span>{{typeof num}}</span>
       <br>
       <input type="text" v-model.trim="str"/><span>{{str.length}}</span>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    Vue.config.keyCodes.a = 65;
    
    new Vue({
      el:"#app",
      data:{
        title:"hello vue event",
        fn:function(d){
          console.log("data-fn-" + d)
        },
        num:0,
        str:""
      },
      methods:{
        fun:function(d){
          console.log("methods-fun-" + d)
        },
        func(a,b){
          // 如果调用方法时,没有主动传参,默认第一个参数就是事件对象
          // 如果调用方法时,主动传参了,默认事件对象丢失,需要主动发送:$event,节能在方法内部获取到事件对象
          console.log("func")
          console.log(a, b)
        },
        fun1(e){
          console.log(e.target)
          console.log(1)
        },
        fun2(e){
          console.log(e.target)
          console.log(2)
        },
        fun3(e){
          console.log(e.target)
          console.log(3)
        },
        fun4(e){
          console.log(e.target)
          console.log(4)
        },
        down(e){
          console.log(1)
        }
      }
    })
  </script>
</html>
